<template>
  <h1>属性绑定练习</h1>
  <input type="text" value="kk">
  <input type="text" value="info">
  <hr>
  <!-- 将input元素的value属性与响应式变量info的值进行绑定
     value显示的输入框默认值,随info变量的变化而变化-->
  <input type="text" v-bind:value="info">
  <!-- v-bind:value="info" 可以简写成 :value="info"-->
  <input type="text" :value="info">
  <hr>
  <!-- 上方的这种是把url看做一个字符串而不是变量的名字 -->
  <a href="url">超链接1</a>
  <!--将a标签的href属性的值与url变量做绑定使用  -->
  <a :href="url">超链接2</a>
</template>

<script setup>
import {ref} from "vue";
const info = ref('属性绑定66');

const url = ref('https://www.baidu.com');
url.value = 'https://www.jd.com';
</script>

<style scoped>

</style>